<template>
    <view class="page">
        <view class="page-section">
            <view class="page-section-demo">
                <map
                    id="map"
                    :longitude="longitude"
                    :latitude="latitude"
                    :scale="scale"
                    :controls="controls"
                    onControlTap="controltap"
                    :markers="markers"
                    onMarkerTap="markertap"
                    :polyline="polyline"
                    :polygon="polygon"
                    :circles="circles"
                    :panels="panels"
                    onPanelTap="onPanelTap"
                    onRegionChange="regionchange"
                    onTap="tap"
                    onCalloutTap="callouttap"
                    show-location
                    style="width: 100%; height: 200px"
                    :include-points="includePoints"
                    :ground-overlays="ground - overlays"
                ></map>
            </view>
        </view>
        <view class="page-section-btns">
            <view onTap="demoResetMap">恢复</view>
            <view onTap="demoGetCenterLocation">获取中心点坐标</view>
            <view onTap="demoMoveToLocation">回到定位点</view>
        </view>
        <view class="page-section-btns">
            <view onTap="demoMarkerAnimation">Marker 动画</view>
            <view onTap="demoMarkerLabel">Label</view>
            <view onTap="demoMarkerCustomCallout">CustomCallout</view>
        </view>
        <view class="page-section-btns">
            <view onTap="demoMarkerAppendStr">文字Marker</view>
            <view onTap="demoTrafficOverlay">路况展示</view>
            <view onTap="demoShowRoute">步行路线规划</view>
        </view>
        <view class="page-section-btns">
            <view onTap="demoCompass">指南针</view>
            <view onTap="demoScale">比例尺</view>
            <view onTap="demoGesture">手势</view>
        </view>
        <view class="page-section-btns">
            <view onTap="demoPolyline">线</view>
            <view onTap="demoPolygon">多边形</view>
            <view onTap="demoCircle">圆</view>
        </view>
        <view class="page-section-btns"></view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	
const markers = [
    {
        id: 0,
        latitude: 30.266786,
        longitude: 120.10675,
        width: 19,
        height: 31,
        iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
        callout: {
            content: 'callout'
        }
    }
];
const panels = [
    {
        id: 6,
        layout: {
            src: '/layout/panel.xml'
        },
        position: {
            top: 5,
            right: 5,
            width: 200,
            height: 84
        }
    }
];
const animMarker = [
    {
        id: 1,
        latitude: 30.266786,
        longitude: 120.10675,
        width: 19,
        height: 31,
        iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
        fixedPoint: {
            originX: 200,
            originY: 150
        },
        markerLevel: 2
    }
];
const labelMarker = [
    {
        id: 2,
        latitude: 30.266786,
        longitude: 120.10675,
        width: 19,
        height: 31,
        iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
        label: {
            content: 'Hello Label',
            color: '#00FF00',
            fontSize: 14,
            borderRadius: 3,
            bgColor: '#ffffff',
            padding: 10
        },
        markerLevel: 2
    }
];
const customCalloutMarker = [
    {
        id: 3,
        latitude: 30.266786,
        longitude: 120.10675,
        width: 19,
        height: 31,
        iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*x9yERpemTRsAAAAAAAAAAAAAARQnAQ',
        customCallout: {
            type: 2,
            descList: [
                {
                    desc: '预计',
                    descColor: '#333333'
                },
                {
                    desc: '5分钟',
                    descColor: '#108EE9'
                },
                {
                    desc: '到达',
                    descColor: '#333333'
                }
            ],
            isShow: 1
        },
        markerLevel: 2
    }
];
const iconAppendStrMarker = [
    {
        id: 34,
        latitude: 30.266786,
        longitude: 120.10675,
        width: 19,
        height: 31,
        iconAppendStr: 'iconAppendStr',
        markerLevel: 2
    }
];
var myTrafficEnabled = 0;
var myCompassEnabled = 0;
var myScaleEnabled = 0;
var myGestureEnabled = 0;
const longitude = 120.10675;
const latitude = 30.266786;
const includePoints = [
    {
        latitude: 30.266786,
        longitude: 120.10675
    }
];
export default {
    data() {
        return {
            scale: 14,
            longitude,
            latitude,
            includePoints,
            circles: [],
            polygon: [],
            polyline: [],
            controls: [],
            markers: [],
            panels: [],
            ground: 0,
            overlays: 0
        };
    },
    onReady() {
        // 使用 my.createMapContext 获取 map 上下文
        this.mapCtx = uni.createMapContext('map');
    },
    methods: {
        demoResetMap() {
            this.setData({
                scale: 14,
                longitude,
                latitude,
                includePoints,
                'ground-overlays': [],
                circles: [],
                polygon: [],
                polyline: []
            });
            this.mapCtx.clearRoute();
        },

        demoGetCenterLocation() {
            this.mapCtx.getCenterLocation({
                success: (res) => {
                    uni.alert({
                        content: 'longitude:' + res.longitude + '\nlatitude:' + res.latitude + '\nscale:' + res.scale
                    });
                    console.log(res.longitude);
                    console.log(res.latitude);
                    console.log(res.scale);
                }
            });
        },

        demoMoveToLocation() {
            this.mapCtx.moveToLocation();
        },

        demoMarkerAnimation() {
            if (!uni.canIUse('createMapContext.return.updateComponents')) {
                uni.alert({
                    title: '客户端版本过低',
                    content: 'this.mapCtx.updateComponents 需要 10.1.35 及以上版本'
                });
                return;
            }
            this.mapCtx.updateComponents({
                markers: animMarker
            });
            this.mapCtx.updateComponents({
                command: {
                    markerAnim: [
                        {
                            markerId: 1,
                            type: 0
                        }
                    ]
                }
            });
        },

        demoMarkerLabel() {
            if (!uni.canIUse('createMapContext.return.updateComponents')) {
                uni.alert({
                    title: '客户端版本过低',
                    content: 'this.mapCtx.updateComponents 需要 10.1.35 及以上版本'
                });
                return;
            }
            this.mapCtx.updateComponents({
                scale: 14,
                longitude,
                latitude,
                includePoints,
                markers: labelMarker
            });
        },

        demoMarkerCustomCallout() {
            this.mapCtx.updateComponents({
                scale: 14,
                longitude,
                latitude,
                includePoints,
                markers: customCalloutMarker
            });
        },

        demoMarkerAppendStr() {
            this.mapCtx.updateComponents({
                scale: 14,
                longitude,
                latitude,
                includePoints,
                markers: iconAppendStrMarker
            });
        },

        demoTrafficOverlay() {
            if (!uni.canIUse('createMapContext.return.updateComponents')) {
                uni.alert({
                    title: '客户端版本过低',
                    content: 'this.mapCtx.updateComponents 需要 10.1.35 及以上版本'
                });
                return;
            }
            myTrafficEnabled = (myTrafficEnabled + 1) % 2;
            this.mapCtx.updateComponents({
                setting: {
                    trafficEnabled: myTrafficEnabled
                }
            });
        },

        demoShowRoute() {
            this.mapCtx.showRoute({
                startLat: 30.257839,
                startLng: 120.062726,
                endLat: 30.256718,
                endLng: 120.059985,
                zIndex: 4,
                routeColor: '#FFB90F',
                iconPath: 'https://gw.alipayobjects.com/mdn/rms_dfc0fe/afts/img/A*EGCiTYQhBDkAAAAAAAAAAAAAARQnAQ',
                iconWidth: 10,
                routeWidth: 10
            });
        },

        demoCompass() {
            myCompassEnabled = (myCompassEnabled + 1) % 2;
            this.mapCtx.showsCompass({
                isShowsCompass: myCompassEnabled
            });
        },

        demoScale() {
            myScaleEnabled = (myScaleEnabled + 1) % 2;
            this.mapCtx.showsScale({
                isShowsScale: myScaleEnabled
            });
        },

        demoGesture() {
            myGestureEnabled = (myGestureEnabled + 1) % 2;
            this.mapCtx.gestureEnable({
                isGestureEnable: myGestureEnabled
            });
        },

        demoPolyline() {
            this.setData({
                scale: 16,
                longitude,
                latitude,
                polyline: [
                    {
                        points: [
                            {
                                // 右上
                                latitude: 30.264786,
                                longitude: 120.10775
                            },
                            {
                                // 左下
                                latitude: 30.268786,
                                longitude: 120.10575
                            }
                        ],
                        color: '#FF0000DD',
                        width: 10,
                        dottedLine: false,
                        iconWidth: 10
                    }
                ]
            });
        },

        demoPolygon() {
            this.setData({
                scale: 16,
                longitude,
                latitude,
                polygon: [
                    {
                        points: [
                            {
                                // 右上
                                latitude: 30.264786,
                                longitude: 120.10775
                            },
                            {
                                // 右下
                                latitude: 30.268786,
                                longitude: 120.10775
                            },
                            {
                                // 左下
                                latitude: 30.268786,
                                longitude: 120.10575
                            },
                            {
                                // 左上
                                latitude: 30.264786,
                                longitude: 120.10575
                            }
                        ],
                        fillColor: '#BB0000DD',
                        width: 5
                    }
                ]
            });
        },

        demoCircle() {
            this.setData({
                scale: 16,
                longitude,
                latitude,
                circles: [
                    {
                        longitude,
                        latitude,
                        color: '#BB76FF88',
                        fillColor: '#BB76FF33',
                        radius: 100,
                        strokeWidth: 3
                    }
                ]
            });
        },

        regionchange(e) {
            console.log('regionchange', e);
        },

        onPanelTap(e) {
            console.log('paneltap:', e);
        },

        markertap(e) {
            console.log('marker tap', e);
        },

        controltap(e) {
            console.log('control tap', e);
        },

        tap() {
            console.log('tap');
        },

        callouttap(e) {
            console.log('callout tap', e);
        }
    }
};
</script>
<style>

</style>
